import React, { Component } from "react";
import { Prompt } from "react-router-dom";
import { Modal } from "antd";
// 表单页面怎么做拦截提示
/*
1.Prompt使用场景1:优化用户体验;
  在填写表单的页面里,假如用户没有填写完,或者没有提交,此时用户要离开的时候,我们需要提示用户;
  如果用户已经操作完了该组件,那么用户离开时,我们就不要提示用户了;
*/
class Home extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
      repassword: "",
      gopathname: "", // 这是要去的下一个地址
      visible: false, // 这个是开启弹窗的标识
      isok: true // 这个是控制Prompt是否弹出
    };
    this.isgopath = false; // 这个是Prompt返回的值
  }
  // 赋值的方法
  handleChange = ({ target }) => {
    this.setState({
      [target.name]: target.value
    });
  };
  // 提交方法
  onSubmit = () => {
    const { username, password, repassword } = this.state;
    if (!username) {
      alert("用户名不许为空!");
    } else if (!password) {
      alert("密码不许为空!");
    } else if (password !== repassword) {
      alert("两次密码不一致!");
    } else {
      console.log("假设提交接口了,成功了");
      this.setState({
        isok: false
      });
    }
  };
  // 渲染
  render() {
    const { isok, username, password, repassword } = this.state;
    return (
      <div>
        {/* 拦截器 */}
        <Prompt
          when={isok}
          message={location => {
            this.setState({ visible: true, gopathname: location.pathname });
            return this.isgopath;
          }}
        />
        {/* 弹出框 */}
        <Modal
          title="用户提示"
          visible={this.state.visible}
          onOk={() => {
            console.log("点击了确认", "使用js控制跳入下一个路由页面");
            // 先将this.isgopath变成true
            this.isgopath = true;
            // 路由跳转
            this.props.history.replace(this.state.gopathname);
            // console.log(this.state.gopathname)
          }}
          onCancel={() => {
            this.setState({
              visible: false
            });
            console.log("点击了关闭");
          }}
        >
          <h1>您真的要离开吗?</h1>
        </Modal>
        {/* 表单 */}
        <form autoComplete="off">
          <label>
            <input
              type="text"
              name="username"
              placeholder="用户名"
              value={username}
              onChange={this.handleChange}
            />
          </label>
          <label>
            <input
              type="password"
              name="password"
              placeholder="密码"
              value={password}
              onChange={this.handleChange}
            />
          </label>
          <label>
            <input
              type="password"
              name="repassword"
              placeholder="确认密码"
              value={repassword}
              onChange={this.handleChange}
            />
          </label>
          <label>
            <button type="button" onClick={this.onSubmit}>
              提交
            </button>
          </label>
        </form>
      </div>
    );
  }
}

export default Home;
